<script setup lang="ts">
import { updateCar } from '@/api'
import { useReName } from '@/business/reName'
import { ElMessage } from '@/stores/elMessage'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const reName = useReName()
const { t } = useI18n()
interface FormData {
  name?: string
}

const formData = ref<FormData>({ name: '' })
const onClick = async () => {
  const res: any = await updateCar(formData.value)
  ElMessage({
    type: 'success',
    message: res.message
  })
  reName.visible = false
}
const closeTemplate = async () => {
  try {
    reName.visible = false
  } catch (error) {
    return error
  }
}
watch(
  () => reName.visible,
  () => {
    formData.value = { name: '' }
  }
)
</script>

<template>
  <ElDialog
    v-model="reName.visible"
    :title="t('bian-ji-ming-cheng')"
    width="50vw"
    align-center
    :before-close="closeTemplate"
  >
    <template #default>
      <ElForm :label-width="100" :model="formData">
        <ElFormItem prop="name" :label="t('che-liang-ming-cheng')">
          <ElInput v-model="formData.name" clearable />
        </ElFormItem>
      </ElForm>
    </template>
    <template #footer>
      <ElButton size="large" type="primary" class="w-full" @click="onClick">{{
        t('que-ding')
      }}</ElButton>
    </template>
  </ElDialog>
</template>
